<template>
	<div>
		<el-row>
			<el-col>
				<el-form :inline="true" :model="searchForm" style="margin-left: 30px; margin-top: 20px; width: 80%; float: left">
					<el-form-item label="菜单名称" size="small">
						<el-input v-model="searchForm.userName"></el-input>
					</el-form-item>
					<el-form-item label="是否启用" size="small">
						<el-select v-model="searchForm.status">
							<el-option label="启用" value="1"></el-option>
							<el-option label="禁用" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="query" size="small">查询</el-button>
					</el-form-item>
				</el-form>
				<el-button type="primary" size="small" style="float: right; margin-top: 25px; margin-right: 40px" @click="add">新增顶级菜单</el-button>
			</el-col>
		</el-row>
		<el-row style="margin-left: 20px">
			<el-table size="small" :data="tableData" border stripe style="width: 98%" row-key="id">
				<el-table-column prop="name" label="菜单名称" align="center"></el-table-column>
				<el-table-column prop="code" label="菜单编号" align="center"></el-table-column>
				<el-table-column prop="url" label="url" align="center"></el-table-column>
				<el-table-column prop="sort" label="排序" align="center"></el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.status == '1'">启用</span>
						<span v-if="scope.row.status == '2'">禁用</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="160">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="addChildMenu(scope.row)">新增子菜单</el-button>
						<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>

		<!-- 弹框 -->
		<el-dialog :title="dialogText" :close-on-click-modal="false" :visible.sync="dialog" width="600px" @close="dialogCancel">
			<el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="130px">
				<el-form-item label="菜单名称" prop="name">
					<el-input v-model="dialogForm.name"></el-input>
				</el-form-item>
				<el-form-item label="菜单编号" prop="code">
					<el-input v-model="dialogForm.code"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-select v-model="dialogForm.status">
						<el-option label="启用" value="1"></el-option>
						<el-option label="禁用" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="url" prop="url">
					<el-input v-model="dialogForm.url"></el-input>
				</el-form-item>
				<el-form-item label="排序号" prop="sort">
					<el-input-number v-model="dialogForm.sort"></el-input-number>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogCancel">取 消</el-button>
				<el-button type="primary" @click="dialogSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { menuList, addmMenu, editMenu, removeMenu } from '@/api/system/menu';
export default {
	data() {
		return {
			searchForm: {},
			tableData: [],
			dialogText: '新增顶级菜单',
			dialog: false,
			mode: 'add',
			roleList: [],
			selectedRows: [],
			transforDialog: false,
			currentUserId: '',
			rules: {
				name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
				code: [{ required: true, message: '请输入菜单编号', trigger: 'blur' }]
			},
			dialogForm: {
				name: '',
				code: '',
				url: '',
				status: '1',
				sort: 1
			}
		};
	},
	mounted() {
		this.query();
	},
	methods: {
		query() {
			menuList(this.searchForm).then((res) => {
				this.tableData = res.rows;
			});
		},
		add() {
			this.dialogForm.id = null;
			this.dialogForm.parentId = null;
			this.dialogText = '新增顶级菜单';
			this.dialog = true;
			this.mode = 'addParent';
			this.dialogForm.parentId = 0;
		},
		edit(item) {
			this.dialogText = '编辑菜单';
			this.mode = 'edit';
			this.dialog = true;
			this.$nextTick(() => {
				Object.assign(this.dialogForm, item);
			});
		},
		addChildMenu(item) {
			this.dialogForm.id = null;
			this.dialogForm.parentId = null;
			this.dialogText = '新增子菜单';
			this.dialog = true;
			this.mode = 'add';
			this.dialogForm.parentId = item.id;
		},
		dialogCancel() {
			this.dialog = false;
			this.$refs['dialogForm'].resetFields();
		},
		dialogSubmit() {
			this.$refs['dialogForm'].validate((valid) => {
				if (valid) {
					if (this.mode == 'add' || this.mode == 'addParent') {
						let tempObj = {};
						Object.assign(tempObj, this.dialogForm);
						addmMenu(tempObj).then(() => {
							this.dialog = false;
							this.$message({ message: '新增菜单成功', type: 'success' });
							this.$refs['dialogForm'].resetFields();
							this.query();
						});
					} else if (this.mode == 'edit') {
						editMenu(this.dialogForm).then(() => {
							this.dialog = false;
							this.$message({ message: '编辑菜单成功', type: 'success' });
							this.$refs['dialogForm'].resetFields();
							this.query();
						});
					}
				}
			});
		},
		remove(id) {
			this.$confirm('确认要删除这条数据吗?(其子菜单也会一并删除)', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				removeMenu(id).then(() => {
					this.$message({ message: '删除菜单成功', type: 'success' });
					this.query();
				});
			});
		}
	}
};
</script>
